<template>
  <div>
    <div class="title">
      <mu-appbar :title="title">
        <mu-text-field class="appbar-search-field" v-model="input" slot="right" hintText="请输入地区名称"/>
        <mu-flat-button icon="search" color="white" @click="weather()" label="搜索" slot="right"/>
      </mu-appbar>
    </div>
    <div>
      <mu-paper class="flex">
        <mu-bottom-nav :value="bottomNav" @change="handleChange" v-for="(item,index) in this.arr" :key="index">
          <mu-bottom-nav-item :value="item.week" :title="item.week"/>
        </mu-bottom-nav>
      </mu-paper>
      <div v-if="bottomNav === '星期一'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div v-if="bottomNav === '星期二'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div v-if="bottomNav === '星期三'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div v-if="bottomNav === '星期四'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div v-if="bottomNav === '星期五'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div v-if="bottomNav === '星期六'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div v-if="bottomNav === '星期日'">
        <div v-if="week === bottomNav">
          <h2>更新时间：{{updatetime}}</h2>
          <mu-table :showCheckbox="showCheckbox">
            <mu-thead slot="header">
              <mu-tr>
                <mu-th tooltip="ID">序号</mu-th>
                <mu-th tooltip="名称">度数℃</mu-th>
                <mu-th tooltip="状态">时间</mu-th>
                <mu-th tooltip="状态">天气</mu-th>
              </mu-tr>
            </mu-thead>
            <mu-tbody>
              <mu-tr v-for="(item,index) in oArray" :key="index">
                <mu-td>{{index + 1}}</mu-td>
                <mu-td>{{item.temp}}</mu-td>
                <mu-td>{{item.time}}</mu-td>
                <mu-td>{{item.weather}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </mu-table>
        </div>
      </div>
      <div id="name" style="width: 100%;height: 300px;"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import axios from "axios"

  let _this;
  export default {
    name: "weather",
    data() {
      return {
        input: "蕲春",
        title: "天气预报",
        toast: false,
        arr: [],
        oArray: [],
        data: [],
        data1: [],
        data2: [],
        data3: [],
        bottomNav: "",
        bottomNav1: null,
        updatetime: null,
        week: null,
        showCheckbox: false
      }
    },
    created() {
      _this = this;
      this.weather();
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    },
    mounted() {
      this.today();
    },
    watch: {},
    methods: {
      //axios需要封装
      fun() {
        let url = "192.168.0.99:8080/Tools/HomeService";//这个位置有的要端口，有的不需要
        axios({
          method: "post",//请求的方式
          url: url,//地址
          contentType: "text/xml; charset=utf-8",//向服务器发送数据的类型
          timeout: 1500,//请求超过1.5秒算超时
          dataType: 'JSON',//返回数据的类型
          data:{},//需要传递的参数
          contentLength:"",//这个没见过 不太会用
        }).then((response)=>{
          //成功返回
          console.log(response);
        }).catch((error)=>{
          //失败返回
          console.log(error);
        })
      },
      handleChange(val) {
        this.bottomNav = val;
        this.today()
      },
      weather() {
        axios.get('https://bird.ioliu.cn/weather/', {
          params: {
            city: _this.input
          }
        }).then(function (response) {
          let array = [];
          _this.arr = [];
          _this.oArray = [];
          if (response.data.msg === "ok") {
            _this.title = response.data.result.city;
            _this.oArray = response.data.result.hourly;
            _this.updatetime = response.data.result.updatetime;
            _this.week = response.data.result.week;
            array = response.data.result.daily;
            array.forEach(function (item, index) {
              if (index === 0) {
                _this.bottomNav = item.week;
              }
              item.name = index;
              _this.arr.push(item);
            });
            localStorage.setItem("name", JSON.stringify(_this.oArray));
          } else {
            _this.toast = true;
            if (_this.toastTimer) clearTimeout(_this.toastTimer);
            _this.toastTimer = setTimeout(() => {
              _this.toast = false
            }, 2000);
            _this.title = "天气预报"
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      today() {
        let arr = JSON.parse(localStorage.getItem("name"));
        this.data = [];
        this.data1 = [];
        this.data2 = [];
        this.data3 = [];
        for (let item of arr) {
          _this.data.push(item.img);
          _this.data1.push(item.temp);
          _this.data2.push(item.time);
          _this.data3.push(item.weather);
        }
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('name'));
        let option = {
          title: {
            text: '今天的天气走势',
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['最高气温']
          },
          toolbox: {
            show: true,
            feature:
              {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                dataView: {
                  readOnly: false
                },
                magicType: {
                  type: ['line', 'bar']
                },
                restore: {},
                saveAsImage: {}
              }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data2
          },
          yAxis: {
            type: 'value',
            axisLabel:
              {
                formatter: '{value} °C'
              }
          },
          series: [
            {
              name: '温度',
              type: 'line',
              data: _this.data1,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '天气情况',
              type: 'line',
              data: _this.data3,
              markPoint: {
                data: [
                  {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'},
                  [{
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  }, {
                    symbol: 'circle',
                    label: {
                      normal: {
                        position: 'start',
                        formatter: '最大值'
                      }
                    },
                    type: 'max',
                    name: '最高点'
                  }]
                ]
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

<style lang="less">
  .title {
    .mu-appbar {
      background-color: #1e88e5;
    }
    .mu-text-field {
      width: 140px;
      margin: 0;
      .mu-text-field-content {
        padding-top: 10px;
        .mu-text-field-input {
          text-align: center;
        }
      }
    }
  }

  .mu-td, .mu-th {
    padding: 0;
    text-align: center;
  }

  h2 {
    text-align: center;
  }

  .flex {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    .mu-bottom-nav {
      width: 14.2%;
      flex: 1;
      .mu-buttom-item {
        width: 14.2%;
        height: 50px;
        line-height: 50px;
        .mu-ripple-wrapper {
          width: 50px;
          padding: 0;
          height: auto;
        }
      }
    }
  }
</style>
